<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CesiumExtensions测试</title>
    <!-- 引入Cesium库 -->
    <script src="../../dist/cesium/Cesium.js"></script>
    <link
      href="https://cesium.com/downloads/cesiumjs/releases/1.135/Build/Cesium/Widgets/widgets.css"
      rel="stylesheet"
    />
    <!-- 引入CesiumExtensions库 -->
    <script src="../../dist/CesiumExtensions.debug.js"></script>
    <script src="../../dist/CesiumExtensions.min.js"></script>

    <!-- 引入测试用CSS -->
    <link rel="stylesheet" href="../../dist/CesiumExtensions.css" />
    <style>
      body,
      html {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      #mapContainer {
        width: 100%;
        height: 100%;
      }
      .control-panel {
        position: absolute;
        top: 20px;
        left: 20px;
        background: rgba(255, 255, 255, 0.9);
        padding: 15px;
        border-radius: 5px;
        z-index: 100;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }
      button {
        margin: 5px 0;
        padding: 8px 12px;
        background: #1890ff;
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
      }
      button:hover {
        background: #40a9ff;
      }
    </style>
  </head>
  <body>
    <div id="mapContainer"></div>
    <div class="control-panel">
      <h3>CesiumExtensions测试</h3>
      <button id="extendViewerBtn">扩展Viewer功能</button>
      <div id="status" style="margin-top: 10px">等待测试...</div>
      <button id="addEntityBtn">添加实体</button>
      <button id="clearEntityBtn">清空实体</button>
      <button id="toggleEntityBtn">显示/隐藏实体</button>
    </div>

    <script>
      // 测试OpenMap库
      const statusElement = document.getElementById("status");
      let entityLayer = null;
      // 检查CesiumExtensions是否成功加载
      if (window.CesiumExtensions) {
        const viewer = CesiumExtensions.viewer.createViewer("mapContainer", {
          ionAccessToken:
            "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1NzJiNzVkMC01YjBmLTQ4N2UtYjMzZi1jM2ZkMGY3ZmEzYTciLCJpZCI6OTE3MTIsImlhdCI6MTY1MTE5OTcwM30.WGkfOEIhTwlsosC3kNSE7-2U6qNBTl2YOyQ04Ma1bT4",
          toolbarPosition: "right-top",
          cameraOptions: {
            destination: [121.92424498806614, 40.89661528946011, 1500], //CesiumExtensions.viewer.PresetCenters.CHINA, // 或 'BEIJING', 'SHANGHAI', 'GLOBAL'
            orientation: {
              heading: 0, // 0度
              pitch: -90, // 90度
              roll: 0, // 横滚角
            },
          },
          screenSpaceCameraController: {
            zoomFactor: 2.0,
          },
          imageryProviderViewModels: [
            // 腾讯地图
            new Cesium.ProviderViewModel({
              name: "腾讯地图",
              iconUrl: Cesium.buildModuleUrl(
                "Widgets/Images/ImageryProviders/naturalEarthII.png"
              ),
              tooltip: "腾讯地图",
              creationFunction: () => {
                return new Cesium.UrlTemplateImageryProvider({
                  url: "https://p2.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg?version=400",
                  customTags: {
                    sx: function (imageryProvider, x, y, level) {
                      return x >> 4;
                    },
                    sy: function (imageryProvider, x, y, level) {
                      return ((1 << level) - y) >> 4;
                    },
                  },
                  tilingScheme:
                    new CesiumExtensions.projection.TencentMercatorTilingScheme(),
                });
              },
            }),
            // 高德地图
            new Cesium.ProviderViewModel({
              name: "高德卫星地图",
              iconUrl: Cesium.buildModuleUrl(
                "Widgets/Images/ImageryProviders/naturalEarthII.png"
              ),
              tooltip: "高德卫星地图",
              creationFunction: () => [
                new Cesium.UrlTemplateImageryProvider({
                  url: "https://webst0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}",
                  subdomains: ["1", "2", "3", "4"],
                  tilingScheme:
                    new CesiumExtensions.projection.GaodeMercatorTilingScheme(),
                }),
                new Cesium.UrlTemplateImageryProvider({
                  url: "https://webst0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
                  subdomains: ["1", "2", "3", "4"],
                  tilingScheme:
                    new CesiumExtensions.projection.GaodeMercatorTilingScheme(),
                }),
              ],
            }),
            // 高德矢量地图
            new Cesium.ProviderViewModel({
              name: "高德矢量地图",
              iconUrl: Cesium.buildModuleUrl(
                "Widgets/Images/ImageryProviders/naturalEarthII.png"
              ),
              tooltip: "高德矢量地图",
              creationFunction: () => [
                new Cesium.UrlTemplateImageryProvider({
                  url: "https://webst0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
                  subdomains: ["1", "2", "3", "4"],
                  tilingScheme:
                    new CesiumExtensions.projection.GaodeMercatorTilingScheme(),
                }),
              ],
            }),
            // 百度地图
            new Cesium.ProviderViewModel({
              name: "百度地图",
              iconUrl: Cesium.buildModuleUrl(
                "Widgets/Images/ImageryProviders/naturalEarthII.png"
              ),
              tooltip: "百度地图",
              creationFunction: () => {
                return new CesiumExtensions.projection.BaiduImageryProvider({
                  url: "https://maponline{s}.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=2&udt=&from=jsapi2_0",
                  subdomains: ["1", "2", "3"],
                  maximumLevel: 18,
                });
              },
            }),
          ],
        });

        // 创建按钮控件
        const buttonControl = new CesiumExtensions.control.ButtonControl({
          text: "测试按钮",
          icon: "https://data.mars3d.cn/img/control/homeButton.svg",
          insertIndex: 0,
          click: function () {
            alert("测试按钮点击事件");
          },
        });
        buttonControl.init(viewer);
        buttonControl.show();

        // 创建状态栏控件
        const statusBarControl =
          new CesiumExtensions.control.StatusBarControl();
        statusBarControl.init(viewer);
        statusBarControl.show();

        // 创建实体图层
        entityLayer = new CesiumExtensions.layer.EntityLayer({
          viewer: viewer,
          hasEdit: true,
          show: true,
        });
      } else {
        statusElement.innerHTML = "CesiumExtensions 库加载失败!";
        console.error("无法找到CesiumExtensions对象");
      }

      // 扩展Viewer功能按钮
      document
        .getElementById("extendViewerBtn")
        .addEventListener("click", function () {
          try {
            // 尝试使用CesiumExtensions.extend方法扩展viewer
            if (CesiumExtensions && CesiumExtensions.extend) {
              CesiumExtensions.extend(viewer);
              statusElement.innerHTML = "Viewer扩展成功!";
              console.log("Viewer已成功扩展");
            } else {
              statusElement.innerHTML = "缺少CesiumExtensions.extend方法!";
              console.error("CesiumExtensions.extend方法不存在");
            }
          } catch (error) {
            statusElement.innerHTML = "扩展失败: " + error.message;
            console.error("扩展Viewer时出错:", error);
          }
        });

      // 添加实体按钮
      document
        .getElementById("addEntityBtn")
        .addEventListener("click", function () {
          entityLayer.add(
            new CesiumExtensions.graphic.entity.PointEntity({
              position: Cesium.Cartesian3.fromDegrees(
                121.92824498806614,
                40.89661528946011,
                12
              ),
              style: {
                show: true, // default
                pixelSize: 20, // default: 1
              },
            })
          );
          entityLayer.add(
            new CesiumExtensions.graphic.entity.PointEntity({
              position: Cesium.Cartesian3.fromDegrees(
                121.92924498806614,
                40.89661528946011,
                12
              ),
              style: {
                show: true, // default
                pixelSize: 10, // default: 1
                color: Cesium.Color.RED,
                outlineColor: Cesium.Color.WHITE,
                outlineWidth: 2.0,
              },
            })
          );

          statusElement.innerHTML = "实体已添加!";
        });

      // 清空实体按钮
      document
        .getElementById("clearEntityBtn")
        .addEventListener("click", function () {
          entityLayer.removeAll();
          statusElement.innerHTML = "实体已清空!";
          console.log("实体已清空");
        });

      // 显示/隐藏实体按钮
      document
        .getElementById("toggleEntityBtn")
        .addEventListener("click", function () {
          entityLayer.show = !entityLayer.show;
          statusElement.innerHTML = `实体已${
            entityLayer.show ? "显示" : "隐藏"
          }!`;
          console.log(`实体已${entityLayer.show ? "显示" : "隐藏"}`);
        });

     
    </script>
  </body>
</html>
